<template>
  <div class="app-container home">
  <el-row :gutter="20">

    <el-col :xs="24" :sm="24" :md="12" :lg="8">
      <el-card class="update-log">
        <el-row>
          <el-col :span="12">
            <div class="block" v-for="fit in fits" :key="fit">

              <el-image
                style="width: 100px; height: 100px"
                :src="url1"
                :fit="fit"></el-image>
            </div>
          </el-col>
          <el-col :span="12">
            <h1 onresize="">1256</h1>
            <h5>宿舍人员</h5>
          </el-col>
        </el-row>
      </el-card>
    </el-col>

    <el-col :xs="24" :sm="24" :md="12" :lg="8">
    <el-card class="update-log">
      <el-row>
        <el-col :span="12">
          <div class="block" v-for="fit in fits" :key="fit">

            <el-image
              style="width: 100px; height: 100px"
              :src="url2"
              :fit="fit"></el-image>
          </div>
        </el-col>
        <el-col :span="12">
          <h1 onresize="">340</h1>
          <h5>宿舍变动记录</h5>
        </el-col>
      </el-row>
    </el-card>
  </el-col>

    <el-col :xs="24" :sm="24" :md="12" :lg="8">
    <el-card class="update-log">
      <el-row>
        <el-col :span="12">
          <div class="block" v-for="fit in fits" :key="fit">
            <el-image
              style="width: 100px; height: 100px"
              :src="url3"
              :fit="fit"></el-image>
          </div>
        </el-col>
          <el-col :span="12">
          <h1 onresize="">123</h1>
          <h5>物业管理记录</h5>
        </el-col>
      </el-row>
    </el-card>
  </el-col>

  </el-row>

    <el-row :gutter="20">

      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="入住学生信息"
              width="200">
            </el-table-column>
            <el-table-column
              prop="num1"
              label=""
              width="150">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">

          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="drom"
              label="宿舍变动统计"
              width="200">
            </el-table-column>
            <el-table-column
              prop="num2"
              label=""
              width="150">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">

          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="weixiu"
              label="物业管理记录"
              width="200">
            </el-table-column>
            <el-table-column
              prop="num3"
              label=""
              width="150">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

    </el-row>
<el-row>最新公告</el-row>
    <el-row>
      <el-table
        :data="Data"
        height="250"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="data"
          label="序号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="tip"
          label="公告标题"
          width="180">
        </el-table-column>
        <el-table-column
          prop="leixing"
          label="公告类型"
          width="180">
        </el-table-column>
        <el-table-column
          prop="neirong"
          label="公告内容"
          width="250">
        </el-table-column>
        <el-table-column
          prop="zhuangtai"
          label="公告状态"
          width="180">
        </el-table-column>
        <el-table-column
          prop="time"
          label="添加时间"
          >
        </el-table-column>
      </el-table>
    </el-row>

    <el-row >
      <el-table
        :data="TData"
        width="100%">
        <el-table-column
          prop="data"
          label="快捷入口"
          >
        </el-table-column>
      </el-table>
    </el-row>

    <el-row :gutter="20">

      <el-col :span="6">
        <el-card shadow="hover"  :style="{ backgroundColor: 'skyblue',width: '250px', height: '100px' }">
           <div class="highlighted-content"> <p>学生信息管理</p></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :style="{ backgroundColor: 'blue',width: '250px', height: '100px' }">
           <div class="highlighted-content"> <p>宿舍信息管理</p></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :style="{ backgroundColor: 'green',width: '250px', height: '100px'}">
          <div class="highlighted-content"> <p>物业记录管理</p></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :style="{ backgroundColor: 'red',width: '250px', height: '100px'}">
          <div class="highlighted-content"> <p>通知公告</p></div>
        </el-card>
      </el-col>

    </el-row>

  </div>



</template>

<script>
export default {
  name: "index",
  data() {
    return {
      fits: ['contain'],
      url1: 'https://img2.imgtp.com/2024/05/08/f1dYrftE.png',
      url2:'https://img2.imgtp.com/2024/05/08/5A9YbxiJ.png',
      url3:'https://img2.imgtp.com/2024/05/08/iy03grBF.png',
      tableData: [{
        date: '入住学生：',
        num1: '1200   个',
        drom:'记录总数：',
        num2: '340   个',
        weixiu:'宿舍报修总数：',
        num3:'123  个'

      }, {
        date: '后勤人员',
        num1: '50    个',
        drom:'已完成任务：',
        num2: '150  个',
        weixiu:'已完成报修：',
        num3:'115  个'
      }, {
        date: '宿舍管理人员',
        num1: '6   个',
        drom:'逾期任务：',
        num2: '13   个',
        weixiu:'未完成任务：',
        num3:'8  个'
      }],
      Data: [{
        data: '1',
        tip: '停电通知',
        leixing: '活动通知',
        neirong:'为响应大连市政委发布大连停电通知，今日宿舍从中午12：00至晚上18：00全楼停电',
        zhuangtai:'有效',
        time:'2024-5-8 7：48：56',
      }, {
        data: '2',
        tip: '电费缴纳',
        leixing: '缴费通知',
        neirong:'请一周内全楼住宿人员到一楼保安处缴纳电费，逾期未交者将采取强制停电，后果自负',
        zhuangtai:'有效',
        time:'2024-5-5 10：42：07',
      }, {
        data: '3',
        tip: '施工通知',
        leixing: '活动通知',
        neirong:'一楼南122在重建学生活动处，施工时间为上午8：00到中午12：00，下午3：00-6：00，施工期间可能产生噪音，为同学造成不便请多谅解',
        zhuangtai:'无效',
        time:'2024-2-9 12：20：13',
      }],
      TData: [
        {
          data:''},],
    }
  }
}
</script>

<style scoped>
.highlighted-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.highlighted-content p {
  color: #ffffff; /* 文字颜色 */

  padding: 10px; /* 内边距 */
  border-radius: 5px; /* 圆角 */
}
</style>
